<template>
  <!-- 时间线模板 -->
  <div class="block">
    <el-timeline v-for="(item,index) in repairHistoryList" :key="index">
      <el-timeline-item
        :timestamp="formatDateTime(item.createTime)"
        placement="top"
        :hollow="activities.hollow"
        :type="activities.type"
      >
        <el-card>
          <div v-if="item.describe!= null">
            <slot>
              <h4>{{item.describe}}</h4>
              <p>{{item.user.username}} 提交于 {{formatDateTime(item.createTime)}}</p>
              <p>维修地点：{{item.address}}</p>
            </slot>
          </div>

          <div v-if="item.company!= null">
            <slot>
              <h4>{{item.project}}</h4>
              <p>{{item.user.username}} 提交于 {{formatDateTime(item.payTime)}}</p>
              <p>缴费金额:￥{{item.price}}.00</p>
            </slot>
          </div>

          <div v-else>
            <slot>
              <h4>{{item.title}}</h4>
              <p>{{item.user.username}} 提交于 {{formatDateTime(item.createTime)}}</p>
              <p>投诉内容：{{item.content}}</p>
            </slot>
          </div>

          <van-collapse v-model="activeNames" accordion v-show="repairHistoryList[index].imgList">
            <van-collapse-item title="图片" :name="index">
              <van-row gutter="20">
                <van-col span="8" v-for="(items,indexs) in item.imgList" :key="indexs">
                  <van-image
                    :src="items"
                    style="width:60px;height:60px;"
                    @click.stop="bigImg(index,indexs)"
                  >
                    <template v-slot:loading>
                      <van-loading size="20px" vertical>加载中...</van-loading>
                    </template>
                  </van-image>
                </van-col>
              </van-row>
            </van-collapse-item>
          </van-collapse>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import formatDateTime from '../utils/data'
export default {
  props: {
    repairHistoryList: {
      type: Array,
    },
  },
  data() {
    return {
      activities: {
        type: 'primary',
        hollow: true,
      },
      activeNames: -1,
    }
  },

  mounted() {
    console.log(this.repairHistoryList)
  },
  methods: {
    //日期格式化
    formatDateTime(val) {
      return formatDateTime.formatDateTime5(val)
    },

    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.repairHistoryList[index].imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
  },
}
</script>

 <style scoped>
.block {
  width: 90%;
  margin: 0 5%;
}
</style>